<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
		<style>
			/*设置图片的容器*/
		.img-list{
			width: 600px;
			height: 450px;
			margin:100px auto;
			position: relative;
			/*为ul开启相对定位，目的是使ul中的pointer可以相对于ul定位而不是相对于
			 初始包含块*/
	
		}
		/*设置li*/
		.img-list li{
			position:absolute;
		}
		.pointer{
			position: absolute;
			z-index: 9999;
			bottom:40px;
			left: 40px;
			
		}
		.pointer a{
			/*设置元素浮动*/
			float: left;
			width: 10px;
			height: 10px;
			margin-left: 6px;
			border-radius: 50%;
			background-color: rgba(255,255,255,0.6);
			
			/*将背景颜色设置到内容区，边框和内边距不再有背景颜色*/
			background-clip: content-box;
			border: 2px solid transparent;
			
		}
		.pointer a:hover
		{
			background-color: #fff;
			border: 2px solid  rgba(255,255,255,0.6);
		}
		</style>
	</head>
	<body>
		
			<ul class="img-list">
				<li><a href="javascript:;"><img src="../img/1.jpeg" alt="" /></a></li>
				<li><a href="javascript:;"><img src="../img/2.jpeg" alt="" /></a></li>
				<li><a href="javascript:;"><img src="../img/3.jpeg" alt="" /></a></li>
				<li><a href="javascript:;"><img src="../img/4.jpeg" alt="" /></a></li>
				<li><a href="javascript:;"><img src="../img/5.jpeg" alt="" /></a></li>
				<li><a href="javascript:;"><img src="../img/6.jpeg" alt="" /></a></li>
				<li><a href="javascript:;"><img src="../img/7.jpeg" alt="" /></a></li>
				<li><a href="javascript:;"><img src="../img/4.jpeg" alt="" /></a></li>
				
				
				
				<div class="pointer">
					<a  href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
					<a href="javascript:;"></a>
				</div>
			</ul>
	</body>
</html>
